<template>
  <div>监听路由</div>
</template>

<script>
import {defineComponent} from 'vue';

export default defineComponent({
  name: 'WatchRouter',
  beforeRouteUpdate(to, from) {
    console.log('===beforeRouteUpdate监听到路由变化(路由组件不变但路由URL的参数改变)===');
    console.log('to', to);
    console.log('from', from);
  },
  watch: {
    $router: {
      immediate: true,
      deep: true,
      handler(to, from) {
        console.log('===watch监听到路由变化===');
        console.log('to', to);
        console.log('from', from);
      }
    }
  },
  created() {
    this.$watch(
      () => this.$route,
      (to, from) => {
        console.log('===$watch监听到路由变化===');
        console.log('to', to);
        console.log('from', from);
      }
    );
  },
});
</script>

<style scoped>

</style>